/*
 * @Description: 
 * @Author: Cxy
 * @Date: 2024-02-23 10:52:59
 * @LastEditors: Cxy
 * @LastEditTime: 2024-12-14 21:16:00
 * @FilePath: \xy-admin\play\src\style\mixin.scss
 */
 @use "sass:map";

/* 滚动条通用 */
@mixin scrollBar($pieceBG: #00000000, $thumbBG: #90939941) {
  &::-webkit-scrollbar {
    width: pxToRem(6);
    height: pxToRem(4);
  }

  &::-webkit-scrollbar-track-piece {
    background-color: $pieceBG;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $pieceBG;
    border-radius: pxToRem(10);
  }

  &:hover {
    &::-webkit-scrollbar-thumb {
      background-color: $thumbBG;
    }
  }
}

/* px转rem */
@function pxToRem($px) {
  @return calc($px / 37.5) * 1rem;
}

$VITE_MOBILE: env('VITE_MOBILE');
/* 媒体查询通用 */
@mixin media($media) {
  $value: map.get($VITE_MOBILE, $media);

  $media-query: '';
  @each $key, $value in $value {
    @if $media-query != '' {
      $media-query: '#{$media-query} and ';
    }
    $media-query: '#{$media-query} (#{$key}: #{$value})';
  }

  @media #{$media-query} {
    @content;
  }
}